<template>
    <div id="news">
        <div class="title" @click="back()">
            <i class="iconfont icon-fanhui"></i>
            消息中心
        </div>
        <div class="collect-btn">
            <div class="btn-list" :class="{'checked1' : on_off}" @click="Btn(1)"><span>站内信<i v-if="alert"></i></span></div>
            <div class="btn-list" :class="{'checked1' : !on_off}" @click="Btn(2)"><span>通知<i v-if="alert2"></i></span></div>
        </div>
        <div id="mescroll">
            <div class="mescroll-bounce" v-mescroll="{up:'upCallback',size:page.num,num:page.size}">
                <!--列表展示-->
                <div class="news-box" v-if="!None">
                    <div class="news-list" v-for="n in news" v-if="on_off">
                        <div class="dian" v-if="!n.readStatus"></div>
                        <div class="news-top">{{n.content}}</div>
                        <div class="news-time">{{n.sendTime |stampFormate2}}</div>
                    </div>
                    <div class="inform-list" v-for="i in inform" v-if="!on_off" @click="goDetails(i.modelType,i.modelTypeId)">
                        <div class="dian" v-if="!i.readStatus"></div>
                        <div class="inform-top" v-html="i.content"></div>
                        <div class="inform-time">{{i.sendTime |stampFormate2}}</div>
                    </div>
                </div>
                <!--空空如也-->
                <div class="none" v-if="None">
                    <img src="../../assets/image/none.png"/>
                    <p>空空如也~</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {userService} from '../../service/userService'
    export default {
        data () {
            return {
                text1: '消息中心',
                on_off:true,
                type:'1',
                alert:false,//站内信提示新消息
                alert2:false,//通知提示新消息
                news:[],
                inform:[],
                letterId:'',
                None:false,
                page:{num:1,size:10},
                busy:false,
                lastPage:false,
                totalPage:'',
            }
        },
        mounted: function() {
            let that = this;
            that.upCallback()
            document.title='消息中心'

        },
        methods:{
            upCallback: function () {
                const that = this;
                that.letterId = [];
                that.alert = false;
                that.alert2 = false;
                that.getListData(that.page.num, that.page.size,function(curPageData) {
                    if(that.type == '1'){
                        if (that.page.num === 1){
                            that.news = [];//如果是第一页需手动制空列表
                        }
                        that.news = that.news.concat(curPageData); //更新列表数据
//                        that.mescroll.endSuccess(curPageData.length);
                        if(that.page.num < that.totalPage){
                            that.busy = false
                        }else{
                            that.lastPage = true
                        }
                        that.page.num = that.page.num+1
                    }
                    if(that.type == '2'){
                        if (that.page.num === 1) {
                            that.inform = [];//如果是第一页需手动制空列表
                        }
                        that.inform = that.inform.concat(curPageData); //更新列表数据
//                        that.mescroll.endSuccess(curPageData.length);
                        if(that.page.num < that.totalPage){
                            that.busy = false
                        }else{
                            that.lastPage = true
                        }
                        that.page.num = that.page.num+1
                    }
                })
            },
            getListData:function(pageNum,pageSize,successCallback) {
                //延时一秒,模拟联网
                const that = this;
                if(that.type == '1'){
                    userService.getInformation({pageNo:pageNum,pageSize:pageSize,type:that.type}).then(function(res){
                        that.totalPage = res.data.datas.totalPage;
                        if(res.data.success) {
                            if (res.data.datas.datas == null && that.totalPage <= 1 && that.page.num === 1) {
                                that.None = true;
                                that.news = [];
                                successCallback && successCallback(that.news);//成功回调
                            } else {
                                that.None = false;
                                let dataArr = res.data.datas.datas;
                                dataArr = that.getFormats(dataArr);
                                userService.postInformation({letterIds: that.letterId}).then(function (res) {
                                })

                                let news = [];
                                for (let i = 0; i < dataArr.length; i++) {
                                    news.push(dataArr[i]);
                                }
                                successCallback && successCallback(news);//成功回调
                            }
                        }
                    })
                }
                if(that.type == '2'){
                    userService.getInformation({pageNo:pageNum,pageSize:pageSize,type:that.type}).then(function(res){
                        that.totalPage = res.data.datas.totalPage;
                        if(res.data.success) {
                            if (res.data.datas.datas == null && that.totalPage <= 1 && that.page.num === 1) {
                                that.None = true;
                                that.inform = [];
                                successCallback && successCallback(that.inform);//成功回调
                            } else {
                                that.None = false;
                                res.data.datas.datas = that.getFormats(res.data.datas.datas);
                                userService.postInformation({letterIds: that.letterId}).then(function (res) {
//                                    console.log(res);
                                })
                                let dataArr = res.data.datas.datas;
                                let inform = [];
                                for (let i = 0; i < dataArr.length; i++) {
                                    inform.push(dataArr[i]);
                                }
                                successCallback && successCallback(inform);//成功回调
                            }
                        }
                    })
                }
            },
            //请求数据
            getNum:function(){

            },
            //循环遍历
            getFormats: function (array) {
                const that = this;
                for (let i = 0; i < array.length; i++) {
                    if(!array[i].readStatus){
                        that.letterId = that.letterId + array[i].id  + ',';
                        if(that.type == '1') {
                            that.alert = true;
                        }
                        if(that.type == '2') {
                            that.alert2 = true;
                        }
                    }
                }
                return array
            },
            getFormatsInform: function (array) {
                const that = this;
                for (let i = 0; i < array.length; i++) {
                    if(!array[i].readStatus){
                        that.alert2 = true;
                    }
                }
                return array
            },
            goDetails:function(type,id){
                let that = this;
                //文章
                if(type == 1){
                    that.$router.push({name:'article',params:{artId:id}})

                }else if(type == 2){
                    //活动
                    that.$router.push({name:'activity',params:{actId:id}})
                }
            },
            Btn:function(val){
                let that = this;
                that.page.num = 1;
                that.inform = [];
                that.news = []
                that.letterId = '';
                if(val === 1){
                    that.on_off = true;
                    that.None = false;
                    that.type = '1';
                    that.upCallback();
                }
                if(val === 2){
                    that.on_off = false;
                    that.None = false;
                    that.type = '2';
                    that.upCallback();
                }
            },
            //返回
            back:function(){
                let that = this;
                that.$router.push({path:'mycenter'})
            }
        },
    }
</script>

<style lang="less">
    @import url("../../assets/css/mescroll.min.css");
    @import url('../../assets/css/theme.less');
    #news{
        width:100%;
        position: relative;
        #mescroll{
            position: absolute;
            top:2.3rem;
            bottom: 0;
            left:0;
            right:0;
            margin:auto;
            background:#fff;
        }
        .title{
            width:100%;
            height: 1.1733rem;
            line-height: 1.1733rem;
            text-align: center;
            font-size: 0.48rem;
            color: #333;
            letter-spacing: 0.3px;
            background: #fff;
            border-bottom: 1px solid rgba(221, 221, 221, 0.5);
            z-index:100;
            i{
                font-size: .5rem;
                color: #999;
                text-align: left;
                position: absolute;
                top: 0;
                left: 0.2667rem;
            }
        }
        .collect-btn{
            width: 100%;
            height: 1.1rem;
            box-shadow: inset 0 -1px 0 0 #DDDDDD;
            background:#fff;
            .btn-list{
                width: 50%;
                height: 1.1rem;
                float: left;
                font-size: 16px;
                text-align: center;
                span{
                    margin:0 1.5rem;
                    line-height:1.1rem;
                    display: block;
                    text-align: center;
                    i{
                        border: 3px solid red;
                        display: inline-block;
                        float: right;
                        margin-top: 0.3rem;
                        border-radius: 100%;
                        position: absolute;
                    }
                }
            }
            .checked1 {
                /*color: #6699FF;*/
                span{
                    line-height:1.05rem;
                    /*border-bottom:2px solid #6699FF;*/
                }
            }
        }
        .news-box{
            padding: 0 0.53rem 0.4rem 0.53rem;
            background:#fff;
            .news-list{
                width:100%;
                box-sizing: border-box;
                background:#fff;
                border-bottom:1px solid #EFF2F7;
                overflow: hidden;
                .dian{
                    width: 0;
                    height: 0;
                    border: 3px solid red;
                    margin-top: 0.6rem;
                    border-radius: 100%;
                    position: absolute;
                    left: .2rem;
                }
                .news-top{
                    width:100%;
                    font-size: 14px;
                    color: #666666;
                    line-height: 0.56rem;
                    margin-top:0.4rem;
                    margin-bottom:0.4rem;
                }
                .news-time{
                    font-size: 12px;
                    color: #999999;
                    margin-bottom:0.43rem;
                }
            }
        }
        .inform-list{
            width:100%;
            box-sizing: border-box;
            background:#fff;
            border-bottom:1px solid #EFF2F7;
            .inform-top{
                width:100%;
                font-size: 14px;
                color: #666666;
                line-height: 0.56rem;
                padding: .4rem 0;
                a{
                    text-decoration: none;
                    color: #70C6FF;
                }
                span{
                    font-size: 14px;
                    color: #68B0F9;
                }
            }
            .dian{
                width: 0;
                height: 0;
                border: 3px solid red;
                margin-top: 0.6rem;
                border-radius: 100%;
                position: absolute;
                left: 0.2rem;
            }
            .inform-time{
                font-size: 12px;
                color: #999999;
                margin-bottom:0.43rem;
            }
        }
        .inifinte-text{
            background:none;
        }
    }
    .none{
        width: 4.13rem;
        height: 4rem;
        margin: auto;
        margin-top: 4.5rem;
        img{
            width:100%;
            height:3.33rem;
        }
        p{
            text-align: center;
            margin-top:0.2rem;
            font-size: 13px;
            color: #666666;
        }
    }
</style>